<template>
  <div class="form-login">
    <el-form :model="form" v-if="!currentName">
      <h1 class="-enter-x">登录</h1>
      <el-form-item class="-enter-x">
        <el-input
          v-model="form.account"
          class="login-input"
          :prefix-icon="User"
          placeholder="账号"
        />
      </el-form-item>
      <el-form-item class="-enter-x">
        <el-input
          v-model="form.password"
          class="login-input"
          :prefix-icon="Lock"
          type="password"
          placeholder="密码"
          show-password
        />
      </el-form-item>
      <el-form-item class="-enter-x">
        <div class="f-inner w100 flex-between">
          <el-checkbox v-model="remember">记住我</el-checkbox>
          <el-button type="text">忘记密码？</el-button>
        </div>
      </el-form-item>
      <div class="-enter-x">
        <el-form-item>
          <el-button
            class="flex-center w100 login-button"
            size="large"
            type="primary"
            @click="handleAccountLogin"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="btn-group w100 flex-between">
            <el-button plain @click="handleSwitchLoginType('UsePhone')"
              >手机登录</el-button
            >
            <el-button plain @click="handleSwitchLoginType('UseCode')"
              >二维码登录</el-button
            >
            <el-button plain @click="handleSwitchLoginType('RegisterAccount')"
              >注册</el-button
            >
          </div>
        </el-form-item>
      </div>

      <div class="-enter-x">
        <el-form-item>
          <div class="other-type w100 flex-between">其他登录方式</div>
        </el-form-item>
        <el-form-item>
          <div class="icon-list">
            <SvgIcon name="wechat" className="icon" />
            <SvgIcon name="qq" className="icon qq" />
            <SvgIcon name="ali_pay" className="icon" />
          </div>
        </el-form-item>
      </div>
    </el-form>
    <component
      :is="componentMap[currentName]"
      @back="handleClearCurrentName"
      v-else
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { setToken } from "/@/utils/token";
import { useRouter } from "vue-router";

import RegisterAccount from "/@/views/login/components/RegisterAccount.vue";
import UseCode from "/@/views/login/components/UseCode.vue";
import UsePhone from "/@/views/login/components/UsePhone.vue";
const router = useRouter();
const componentMap = {
  RegisterAccount, //注册
  UseCode, //二维码登录
  UsePhone, //手机登录
};

const currentName = ref("");
const remember = ref(false);
const form = reactive({
  account: "",
  password: "",
});
// 切换登录方式
const handleSwitchLoginType = (type: string): void => {
  currentName.value = type;
};
// 清空currentName值
const handleClearCurrentName = () => {
  currentName.value = "";
};
// 账号密码登录
const handleAccountLogin = () => {
  setToken("token");
  router.push("/");
  if (!window.localStorage.getItem("theme")) {
    window.localStorage.setItem(
      "theme",
      JSON.stringify({
        id: 0,
        desc: "青色",
        baseColor: "#0aa1b6",
      })
    );
  }
};
</script>

<style scoped lang="less">
.form-login {
  width: 404px;
  h1 {
    margin-bottom: 12px;
  }
  .login-button {
    font-size: 18px;
  }
  // 按钮样式
  .btn-group {
    .el-button {
      width: 130px;
    }
  }
  // 其他登录方式
  .icon-list {
    width: 100%;
    display: flex;
    justify-content: center;

    .icon {
      color: #888;
      font-size: 28px;
      cursor: pointer;
      &:hover {
        color: @baseColor;
      }
    }
    .qq {
      margin: 0 40px;
    }
  }
  .other-type {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    &::before,
    &::after {
      flex: 1;
      display: block;
      content: "";
      border-top: 1px solid rgba(229, 231, 235, 0.9);
    }
    &::before {
      margin-right: 10px;
    }
    &::after {
      margin-left: 10px;
    }
  }
}
</style>
